// 用户登录
$('#login').click(function () {
     // 获取用户输入的账号和密码
     let userName = $('#exampleInputEmail1').val()
     let userPassword = $('#exampleInputPassword1').val()
     // 判断输入的账号和密码是否在数据库中
     let useData = getData('staff')
     let state = false
     for (let i = 0; i < useData.length; i++){
          if (useData[i].jobNumber == userName && useData[i].password == userPassword){
               // 跳转到菜单界面
               open('./guestRoom.html', '_self')

               //保存当前登陆者信息
               saveData('loginUser',useData[i])
               state = true
               break
          }
     }
     if(state === false){
          //弹框提示用户名错误请重新输入
          $('.modal-content').html(`
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
               </div>
               <div class="modal-body">
                    用户名或密码错误，请重新输入
               </div>
               <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
               </div> 
          `)
          $('#myModal').modal('show')
     }
})

// 弹出注册信息表单
$('#register').click(function () { 
     $('.modal-content').html(`
     <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
               aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">用户注册</h4>
     </div>
     <div class="modal-body">
          <form class="form-horizontal">
               <div class="form-group1">
                    <label for="inputEmail3" class="col-sm-2 control-label">工号</label>
                    <div class="col-sm-10">
                         <input type="text" class="form-control" id="getJobId" placeholder="工号" disabled>
                    </div>
               </div>
               <div class="form-group1">
                    <label for="inputEmail3" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                         <input type="text" class="form-control contentNull1" id="getPassword" placeholder="请输入密码">
                         <span class="contentNull">密码不能为空</span>
                    </div>
               </div>
               <div class="form-group1">
                    <label for="inputEmail3" class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-10">
                         <input type="text" class="form-control" id="getPassword1" placeholder="请再次输入密码">
                         <span id="passAff">两次密码不一样，请重新输入</span>
                    </div>
               </div>
               <div class="form-group1">
                    <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                         <input type="text" class="form-control contentNull1" id="getName" placeholder="请输入姓名">
                         <span class="contentNull">姓名不能为空</span>
                    </div>
               </div>
               <div class="form-group1">
                    <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                         <span class="sex1">男</span> <span class="sex2"><input type="radio"  class="getSex" name="sex" value="man"></span>
                         <span class="sex1">女</span> <span class="sex2"><input type="radio"  class="getSex" name="sex" value="woman" checked></span>
                    </div>
               </div>
               <div class="form-group1">
                    <label for="inputEmail3" class="col-sm-2 control-label">出生日期</label>
                    <div class="col-sm-10">
                         <input type="text" class="form-control contentNull1" id="getBirthdate" placeholder="请输入xxxx/xx/xx格式的日期">
                         <span class="contentNull">出生日期不能为空</span>
                    </div>
               </div>
               <div class="form-group1">
                    <label for="inputEmail3" class="col-sm-2 control-label">职位</label>
                    <div class="col-sm-10">
                         <select  name="" id="getPosition" class="form-control">
                              <option value="option1">前台</option>
                              <option value="option2">保洁</option>
                         </select>
                    </div>
               </div>

               <div class="form-group1">
                    <label for="inputEmail3" class="col-sm-2 control-label">联系电话</label>
                    <div class="col-sm-10">
                         <input type="text" class="form-control contentNull1" id="getTel" placeholder="请输入电话号码">
                         <span class="contentNull">联系电话不能为空</span>
                    </div>
               </div>
          </form>
     </div>
     <div class="modal-footer1">
          <button type="button" class="btn btn-default" id="register1">注册</button>
     </div>
     `)
     // 获取用户数据信息，自动生成工号
     let useData = getData('staff')
     $('#getJobId').val((useData[useData.length-1].jobNumber)*1+1)    //自动生成工号
     $('#myModal').modal('show')
     // 判断两次密码是否一样
     $('#getPassword1').blur(function(){
          let getPassword = $('#getPassword').val()                        //密码
          let getPassword1 = $('#getPassword1').val()                      //确认密码
          if(getPassword !== getPassword1){
               $('#passAff').show()   
          }
          else{
               $('#passAff').hide()   
          }
     })
     // 判断输入框是否为空
     $('.contentNull1').blur(function(){
          if($(this).val()==''){
               $(this).siblings().show()  
          }
          else{
               $(this).siblings().hide() 
          }
     })
})

// 提交注册信息
$('.modal-content').on('click','#register1',function(){
     let useData = getData('staff')
     //1.获取表单里面的数据
     let id = (useData[useData.length-1].id)*1+1
     let getJobId = parseInt($('#getJobId').val())               //工号
     let getPassword = $('#getPassword').val()                   //密码
     let getPassword1 = $('#getPassword1').val()                 //确认密码
     let getName = $('#getName').val()                           //姓名
     let getSex                                                  //性别
     let getBirthdate = $('#getBirthdate').val()                 //出生日期
     let getPosition = $('#getPosition>option:checked').html()   //职位
     let getTel = $('#getTel').val()                             //联系电话
     let AccessLevel                                             //权限

     // 根据职位判断权限等级
     if(getPosition === '前台'){
          AccessLevel = 1
     }
     else if(getPosition === '保洁'){
          AccessLevel = 2
     }
     //根据value值判断性别
     if($('.getSex:checked').val() ==='woman'){
          getSex = '女'
     }
     else{
          getSex = '男' 
     }
     if(getPassword!=='' && getPassword1!=='' && getName!=='' && getBirthdate!=='' && getTel!=='' && getPassword == getPassword1){
           //2.把获取到的数据值添加到员工数据对象里面
           useData.push({ 
               id: id, 
               jobNumber: getJobId, 
               password: getPassword,
               userName: getName,
               sex:getSex,
               Birthdate: getBirthdate,
               tel: getTel, 
               headPortrait: '../images/员工1.webp',
               AccessLevel: AccessLevel, 
               jobTitle: getPosition
          })
          // 将数据保存到浏览器
          saveData('staff', useData)
          //提示注册成功
          $('.modal-content').html(`
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
               aria-hidden="true">&times;</span></button>
               <h4 class="modal-title" id="myModalLabel">注册提示</h4>
          </div>
          <div class="modal-body">
               注册成功！
          </div>
          <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
          </div> 
          `)
          $('#myModal').modal('show')
     }
     else{
          //提示输入错误
          if(getPassword==''){
               $('#getPassword').siblings().show()
          }
          if(getName==''){
               $('#getName').siblings().show()
          }
          if(getBirthdate==''){
               $('#getBirthdate').siblings().show()
          }
          if(getTel==''){
               $('#getTel').siblings().show()
          }
     }   
})